<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<div id="console"></div>
<!-- These elements should not be selected in ShadowRoot's querySelector. -->
<div id="foo"></div>
<div class="foo"></div>
<foo></foo>
<script>
description("Tests for ShadowRoot JS APIs. Can only run within DRT");

// (which is always enabled in testing).
shouldBeDefined("window.ShadowRoot");
shouldThrow("new window.ShadowRoot(document.createElement('div'))");

var shadowHost = document.createElement('div');
document.body.appendChild(shadowHost);
var shadowRoot = shadowHost.attachShadow({mode: 'open'});

shouldBeTrue("shadowRoot instanceof window.ShadowRoot");

var div1 = document.createElement("div");
div1.setAttribute("id", "div1");
shadowRoot.appendChild(div1);

var div2 = document.createElement("div");
div2.setAttribute("id", "div2");
div2.classList.add("class2");
shadowRoot.appendChild(div2);

// Tests for Document should cover most cases for the following APIs.
// We have basic tests here. More tests are welcome, but we should avoid unnecssary duplications.
shouldBe("shadowRoot.getElementById('div1')", "div1");
shouldBeNull("shadowRoot.getElementById('foo')");

shouldBe("shadowRoot.querySelector('#div1')", "div1");
shouldBeNull("shadowRoot.querySelector('#foo')");
shouldBe("shadowRoot.querySelector('.class2')", "div2");
shouldBeNull("shadowRoot.querySelector('.foo')");
shouldBe("shadowRoot.querySelectorAll('div')", "[div1, div2]");
shouldBe("shadowRoot.querySelectorAll('foo')", "[]");
</script>
</body>
</html>
